<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>注册</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />

	<link rel="stylesheet" href="${pageContext.request.contextPath }/AmazeUI-2.4.2/assets/css/amazeui.min.css" />
	<link href="${pageContext.request.contextPath }/css/dlstyle.css" rel="stylesheet" type="text/css">
	<script src="${pageContext.request.contextPath }/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath }/AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
	<link href="${pageContext.request.contextPath }/basic/css/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%@ include file="menu.jsp" %>

<div class="login-boxtitle">
	<a href="home/demo.html"><img alt="" src="${pageContext.request.contextPath }/images/logobig.png" /></a>
</div>

<div class="res-banner">
	<div class="res-main">
		<div class="login-banner-bg"><span></span><img src="${pageContext.request.contextPath }/images/big.jpg" /></div>
		<div class="login-box">
			<div class="am-tabs" id="doc-my-tabs">
				<ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
					<li class="am-active"><a href="">邮箱注册</a></li>
					<li><a href="">手机号注册</a></li>
				</ul>

				<div class="am-tabs-bd">
					<!-- 邮箱注册 -->
					<div class="am-tab-panel am-active">
						<form id="regist_email" action="${pageContext.request.contextPath }/user_regist.action" method="post"  novalidate="novalidate">
							<div class="user-email">
							 	<label for="email"><i class="am-icon-envelope-o"></i></label>
								<input type="text" id="email" name="email" onblur="checkEmail()" placeholder="请输入邮箱账号" />
		                	</div>										
			                <div class="user-pass">
							    <label for="password"><i class="am-icon-lock"></i></label>
							    <input type="password" id="password" name="password" placeholder="设置密码"/>
			                </div>										
			                <div class="user-pass">
							    <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
							    <input type="password" id="repassword" name="repassword" placeholder="确认密码"/>
			                </div>	
		                </form>
						<div class="login-links">
							<label for="reader-me">
								<input id="reader-me" type="checkbox"/> 点击表示您同意商城<a href="#" onclick="openWin()"><font color="green">《服务协议》</font></a>
							</label>
					  	</div>
						<div class="am-cf">
							<input type="button" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl" onclick="regist_email()"/>
						</div>
		                <div>
							<span><font color="red"><s:fielderror fieldName="email"/></font></span>
							<span><font color="red"><s:fielderror fieldName="password"/></font></span>
							<span id="span1"></span>
		                </div>
					</div>
					
					
					
					<!-- 手机注册 -->
					<div class="am-tab-panel">
						<form id="regist_phone" method="post">
              				<div class="user-phone"><center><font color="red">系统维护中请使用邮箱注册</font></center></div>																			
              				<div class="user-phone">
							    <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
							    <input type="tel" name="" id="phone" placeholder="请输入手机号"/>
             				</div>																			
							<div class="verification">
								<label for="code"><i class="am-icon-code-fork"></i></label>
								<input type="tel" name="" id="code" placeholder="请输入验证码"/>
								<a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
								<span id="dyMobileButton" onclick="getting()">获取</span></a>
							</div>
				            <div class="user-pass">
								<label for="password"><i class="am-icon-lock"></i></label>
								<input type="password" name="" id="password" placeholder="设置密码"/>
				            </div>									
				            <div class="user-pass">
								<label for="passwordRepeat"><i class="am-icon-lock"></i></label>
								<input type="password" name="" id="passwordRepeat" placeholder="确认密码"/>
				            </div>	
						</form>
						<div class="login-links">
							<label for="reader-me">
								<input id="reader-me" type="checkbox"/> 点击表示您同意商城<a href="#"><font color="green">《服务协议》</font></a>
							</label>
					  	</div>
						<div class="am-cf">
							<input type="button" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl" onclick="regist_phone()"/>
						</div>
					</div>

					<script>
						$(function() {
						    $('#doc-my-tabs').tabs();
						  })
					</script>
					<script type="text/javascript">
						//提交注册的 js
						function regist_email(){
							<!-- window.location.href = "${pageContext.request.contextPath }/user_regist.action"; -->
							 document.getElementById("regist_email").submit();
						}
						
						//维护中的 js
						function getting(){
							alert("系统维护中请使用邮箱注册");
						}
						function regist_phone(){
							alert("系统维护中请使用邮箱注册");
						}
						
						//表单验证的 js
						$(function(){
							$(":input[name=password]").blur(function(){
								var password = document.getElementById("password").value;
								var $this = $(this);
								if (password == '' || password == null) {
									$(":input[name=repassword]").nextAll("font").remove();
									$this.next("font").remove();
									$(":input[name=repassword]").after("<font color='red'>密码不能为空！</font>");
								}else {
									$(":input[name=repassword]").nextAll("font").remove();
								}
							});
							$(":input[name=repassword]").blur(function(){
								var repassword = document.getElementById("repassword").value;
								var password = document.getElementById("password").value;
								var $this = $(this);
								if (repassword == '' || repassword == null) {
									$(":input[name=repassword]").nextAll("font").remove();
									$this.next("font").remove();
									$this.after("<font color='red'>请再次填写密码!</font>");
								}else {
									$this.nextAll("font").remove();
									if (repassword != password) {
										$this.after("<font color='red'>两次输入的密码不一致!</font>");
									}
								}
							});
							
							$(":input[name=email]").blur(function(){
								var email = document.getElementById("email").value;
								var $this = $(this);
								if (email == '' || email == null) {
									$(":input[name=repassword]").nextAll("font").remove();
									$this.next("font").remove();
									$(":input[name=repassword]").after("<font color='red'>请填写邮箱地址!</font>");
								}else {
									$(":input[name=repassword]").nextAll("font").remove();
								}
							});
							$(":input[name=captcha]").blur(function(){
								var captcha = document.getElementById("captcha").value;
								var $this = $(this);
								if (captcha == '' || captcha == null) {
									$this.next("font").remove();
									$this.after("<font color='red'>请输入验证码!</font>");
								}else {
									$this.nextAll("font").remove();
								}
							});
						})
						
						//AJAX异步校验邮箱是否可用
						function checkEmail() {
							//获取文本框的值
							var email = document.getElementById("email").value;
							
							
							if (email != "") {
								//创建异步交互对象
								var xhr = createXmlHttp();
								//设置监听
								xhr.onreadystatechange = function() {
									if (xhr.readyState == 4) {
										if (xhr.status == 200) {
											document.getElementById("span1").innerHTML = xhr.responseText;
										}
									}
								}
								
								//打开连接
								xhr.open("GET", "${pageContext.request.contextPath}/user_findByEmail.action?time=" + new Date().getTime() + "&email=" + email, true);
								
								//发送
								xhr.send(null);
							}
							
						}
						//创建 xmlHttp 对象的方法
						function createXmlHttp() {
							var xmlHttp;
							
							try {
								xmlHttp = new XMLHttpRequest();
							} catch (e) {
								try {
									xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
								} catch (e) {
									try {
										xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
									} catch (e) {}
								}
							}
							
							return xmlHttp;
						}
					
					</script>
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- 页面底部区域 -->
	<%@ include file="floor.jsp" %>
</body>
</html>